import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Tabs } from 'antd'
import emitter from '@/Evt.js'
const ReactMarkdown = require('react-markdown')
import { filterType } from '@/utils/commons.js'
import { getKeepList, getArticleList } from '@/api/common'
import './css/index.less'
import Comment  from './comment'

const { TabPane } = Tabs

class article extends Component {
	constructor(props) {
		super(props)
	}
	state = {
		articleObj: {}, // 文章数据据
		nextPre: {}, //上一页，下一页数据
		keepList: [], // 继续阅读数据
	}

	componentDidMount() {
		// console.log(
		// 	this.props.location.query.nextPre
		// )
		// this.setState({
	
		// 	nextPre: this.props.location.query.nextPre,
		// })
		this.getKeepListF('html')
        this.getArticleListF()
	}

	getKeepListF = (types) => {
		getKeepList({
			userName: 'longwei',
			flag: types,
		}).then(
			(res) => {
				this.setState({
					keepList: res,
				})
			},
			(error) => {}
		)
	}
	getArticleListF = () => {
        let index = 0
        getArticleList({
			userName: 'longwei',
			flag: 'html',
		}).then(
			(res) => {
			
                //拼装上一页，下一页数据,只拿到标题和位置
                    let nextidIndex = res[index - 1]
                    ? res[index - 1].idIndex
                    : -1
                let nextname = res[index - 1]
                    ? res[index - 1].title
                    : -1
                let preidIndex = res[index + 1]
                    ? res[index + 1].idIndex
                    : -1
                let prename = res[index + 1]
                    ? res[index + 1].title
                    : -1
                let nextPre = {
                    nextidIndex: nextidIndex,
                    nextname: nextname,
                    preidIndex: preidIndex,
                    prename: prename,
                }
                this.setState({
					articleObj: res[0],
                    nextPre: nextPre
				})
                console.log(res)
			},
			(error) => {}
		)
	}



	render() {
		const {
			title,
			autor,
			times,
			Pageview,
			content,
			types,
		} = this.state.articleObj
		const { nextPre, keepList } = this.state
		return (
			<div className="article-detail-area">
				<div className="ad-content">
					<div className="ad-content-div">
						<div className="ad-content">
							<div className="ad-content-div">
								<div className="ad-content-left">
									<div className="content-box">
										<div>
											<h2 className="log-title">
												{title}
											</h2>
											<div className="log-meta clearfix">
												<span>{autor}</span>
												<span>{times}</span>
												<span>{Pageview}次浏览</span>
											</div>
										</div>
                                        {content}
										<ReactMarkdown
											className="content-page"
											source={content}
										/>
										<div className="mb-default clearfix">
											<a className="float-left btn btn-outline-default mr-small">
												{filterType(types)}
											</a>
										</div>
										<div className="log-neighbor clearfix">
											{nextPre.nextidIndex > -1 && (
												<a>
													<span>上一篇：</span>
													{nextPre.nextname}
												</a>
											)}

											{nextPre.preidIndex > -1 && (
												<a>
													<span>下一篇：</span>
													{nextPre.prename}
												</a>
											)}
										</div>
										<div className="log-readmore">
											<h5 className="page-header">
												继续阅读
											</h5>
											<ul>
												{keepList.map((item, index) => {
													return (
														<li key={index}>
															<span className="page-dot"></span>
															<a rel="noopener noreferrer">{item.title}</a>
														</li>
													)
												})}
											</ul>
										</div>

										<Comment></Comment>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

export default article
